<!DOCTYPE html>
<html class="iframe-h">

	<head>
		<meta charset="UTF-8">
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>学生信息列表</title>
		<link rel="stylesheet" type="text/css" href="../../static/admin/layui2.9.13/css/layui.css" />
		<link rel="stylesheet" type="text/css" href="../../static/admin/css/admin.css" />
	</head>

	<body>
		<div class="wrap-container clearfix">
				<div class="column-content-detail">
					<form class="layui-form" action="">
						<div class="layui-form-item">
							<div class="layui-inline tool-btn">
								<button class="layui-btn layui-btn-small layui-btn-normal addBtn" data-url="article-add.html"><i class="layui-icon">&#xe654;</i></button>
								<button class="layui-btn layui-btn-small layui-btn-danger delBtn"  data-url="article-add.html"><i class="layui-icon">&#xe640;</i></button>
								<button class="layui-btn layui-btn-small layui-btn-warm listOrderBtn hidden-xs" data-url="article-add.html"><i class="iconfont">&#xe656;</i></button>
							</div>
							<div class="layui-inline">
								<input type="text" name="title" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
							</div>
							<div class="layui-inline">
								<select name="states" lay-filter="status">
									<option value="">请选择一个状态</option>
									<option value="010">正常</option>
									<option value="021">停止</option>
									<option value="0571">删除</option>
								</select>
							</div>
							<button class="layui-btn layui-btn-normal" lay-submit="search">搜索</button>
						</div>
					</form>
					<div class="layui-form" id="table-list">
						<table class="layui-hide" id="stuInfo" lay-filter="stuInfo"></table>
					</div>
				</div>
		</div>
        <script type="text/html" id="barDemo">
            <div class="layui-clear-space">
                <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                <a class="layui-btn layui-btn-xs" lay-event="delete">删除</a>
            </div>
        </script>
		<script src="../../static/admin/layui2.9.13/layui.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../static/admin/js/common.js" type="text/javascript" charset="utf-8"></script>
    <script>
        layui.use(['table'],function (){
            var table = layui.table;
            table.render({
                elem:'#stuInfo',
                url:'/getStuInfosLimit',
                height:'500',
                page:true,
                cols:[[
                    {type:'checkbox',fixed:'left'} ,
                    {field:'sid',fixed:'left',width:120,title:'学号',sort:true,align: 'center'},
                    {field:'name',width:200,title:'姓名',align: 'center'},
                    {field:'sex',width:80,title:'性别',align: 'center'},
                    {field:'class_name',width:250,title:'班级',align: 'center'},
                    {field:'major_name',width:200,title:'班级',align: 'center'},
                    {field:'college_name',width:200,title:'班级',align: 'center'},
                    {field:'phone',width:150,title:'电话',align: 'center'},
                    {field:'email',width:150,title:'邮箱',align: 'center'},
                    {fixed: 'right', title:'操作', width: 134, minWidth: 125, align: 'center',toolbar: '#barDemo'}
                ]],
                done:function (){
                    var sid = this.sid
                    console.log('done:function',sid);

                }
            });
            /**
             单元格工具事件「单击触发」： table.on('tool(filter)', callback);
             单元格工具事件「双击触发」： table.on('toolDouble(filter)', callback);
             单击或双击单元格中带有 lay-event="" 属性的元素时触发。在表格主体的单元格中，经常需要进行很多的动态操作，比如编辑、删除等操作，这些均可以在单元格工具事件中完成。
             注意，tool()中的内容为<table>的属性
             */
            table.on('tool(stuInfo)',function (obj){
                var options = obj.config;
                console.log('obj=',obj); // 查看对象所有成员
                console.log('obj.data=',obj.data)
                var data = obj.data;
                // 根据不同的事件名进行相应的操作
                switch(obj.event){ // 对应模板元素中的 lay-event 属性值
                  case 'add':
                    layer.msg('添加');
                  break;
                  case 'delete':
                    layer.msg('删除');
                  break;
                  case 'edit':
                    layer.msg('编辑');
                    layer.open({
                        title:'编辑-学生信息',
                        type:2,
                        content:'/stuInfo?sid=' + data.sid
                    });
                  break;
                };
            });
        });
    </script>
	</body>

</html>